﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全选练习</title>
</head>
<body>

<form>
  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>
<script src="jquery-1.10.1.js"></script>
<script>
  var $checkedAllBox=$('#checkedAllBox')
  var $items=$(':checkbox[name=items]')
  $('#checkedAllBtn').click(function () {
    $items.prop('checked',true)
    $checkedAllBox.prop('checked',true)
  })
  $('#checkedNoBtn').click(function () {
    $items.prop('checked',false)
    $checkedAllBox.prop('checked',false)
  })
  $('#checkedRevBtn').click(function () {
    $items.each(function () {
      this.checked=!this.checked
    })
    console.log($items.filter(':not(:checked)').length)
    $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0)
  })
  $('#sendBtn').click(function () {
    $items.filter(':checked').each(function () {
      console.log(this)
      alert(this.value)
    })
  })
  $checkedAllBox.click(function () {
    $items.prop('checked',this.checked)
  })
  $items.click(function () {
    $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0)
  })
</script>
</body>

</html>
